<template>
  <div class="cursor-glow" ref="cursorGlow"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const cursorGlow = ref(null)

onMounted(() => {
  let mouseX = 0
  let mouseY = 0
  let currentX = 0
  let currentY = 0
  let animationId = null
  let isMoving = false
  let stopTimeout = null

  const handleMouseMove = (e) => {
    mouseX = e.clientX
    mouseY = e.clientY
    
    // 优化：只在鼠标移动时启动动画
    if (!isMoving) {
      isMoving = true
      animate()
    }
    
    // 清除之前的停止计时器
    clearTimeout(stopTimeout)
    
    // 优化：鼠标停止移动150ms后停止动画
    stopTimeout = setTimeout(() => {
      isMoving = false
    }, 150)
  }

  const animate = () => {
    if (!isMoving) {
      animationId = null
      return
    }
    
    // 缓动效果
    const deltaX = mouseX - currentX
    const deltaY = mouseY - currentY
    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
    
    // 优化：当距离很小时停止动画
    if (distance < 0.5 && !isMoving) {
      currentX = mouseX
      currentY = mouseY
      if (cursorGlow.value) {
        cursorGlow.value.style.left = `${currentX}px`
        cursorGlow.value.style.top = `${currentY}px`
      }
      animationId = null
      return
    }
    
    currentX += deltaX * 0.15
    currentY += deltaY * 0.15

    if (cursorGlow.value) {
      cursorGlow.value.style.transform = `translate(-50%, -50%) translate3d(${currentX}px, ${currentY}px, 0)`
      cursorGlow.value.style.left = '0'
      cursorGlow.value.style.top = '0'
    }

    animationId = requestAnimationFrame(animate)
  }

  window.addEventListener('mousemove', handleMouseMove, { passive: true })

  onUnmounted(() => {
    window.removeEventListener('mousemove', handleMouseMove)
    clearTimeout(stopTimeout)
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
  })
})
</script>

<style scoped>
.cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(99, 102, 241, 0.05) 30%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

@media (max-width: 768px) {
  .cursor-glow {
    display: none;
  }
}
</style>

